<template>
    <view class="search-wrap">
        <view class="search-box" @click="goto('/pagesGoods/goods_search/index')">
            <text class="icon iconfont icon-sousuo"></text>
            <text class="search-txt">{{keyword}}</text>
        </view>
        <view class="btn-box" v-if="btn_txt != ''" @click="goto('/')">
            <text>{{ btn_txt }}</text>
        </view>
    </view>
</template>

<script setup>
defineProps({
    "keyword": {
        type: String,
        default: '搜索商品'
    },
    "btn_txt": {
        type: String,
        default: ''
    }
})
// 跳转
const goto = (url) => {
    if (url == '/') {
        uni.switchTab({url: '/pages/index/index'})
    } else {
        uni.navigateTo({ url })
    }
}
</script>

<style lang="scss">
.search-wrap {
    background-color: #008000;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;

    position: fixed;
    width: 100%;
    z-index: 100;

    .search-box {
        flex: 1;
        // width: 90%;
        margin: 0 20rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        height: 70rpx;
        padding: 0 10rpx;
        border-radius: 35rpx;
        .icon {
            font-size: 50rpx;
        }
    }

    .btn-box {
        display: flex;
        justify-content: center;

        height: 60rpx;
        line-height: 60rpx;

        margin-right: 20rpx;
        border: 2rpx solid #fff;
        width: 100rpx;
        border-radius: 6rpx;
        box-shadow: 1rpx 1rpx 1rpx #fff;
        color: #fff;
    }
}
</style>